<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="日期：">
        <el-select v-model="electricityRecordDTO.elDate" placeholder="Select" style="width: 240px">
          <el-option v-for="item in month" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="废旧物料描述">
        <el-input v-model="electricityRecordDTO.oldDescription" placeholder></el-input>
      </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">重置</el-button>
    </el-form>
    <!--表格组件-->
    <el-table :data="list" style="width: 100%">
      <!--prop 后端返回的json数据的字段名-->
      <el-table-column prop="oldDescription" label="废旧物料描述"></el-table-column>
      <el-table-column prop="inNum" label="入库数量"></el-table-column>
      <el-table-column prop="outNum" label="出库数量"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="elDate" label="反馈日期"></el-table-column>
      <el-table-column prop="resource" label="来源"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>
  </div>
</template>
  <script>
import statisticsApi from "@/api/statistics";

export default {
  data() {
    return {
      //页面数据
      list: [],
      //查询条件
      electricityRecordDTO: {
        pageNo: 1,
        pageSize: 10,
        oldDescription: "",
        elDate: "",
    
      },
      pojo: {
        status: 1
      },
      dialogFormVisible: false,
      month: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
    };
  },
  created() {
    //在创建vue实例后触发钩子函数
    this.fetchData();
  },
  methods: {
    fetchData() {
      //发起axios请求  获取后端的数据，赋值给模型
      statisticsApi.electricityRecord(this.electricityRecordDTO).then(response => {
        console.log(response);
        this.list = response.data;
        this.count = response.data.length;
      });

    },

    sizeData(size) {
      this.electricityRecordDTO.pageSize = size;
      this.fetchData();
    },
    pageData(page) {
      this.electricityRecordDTO.pageNo = page;
      this.fetchData();
    },
    //新增和修改使用同一个方法打开对话框
    handleEdit() {
      this.dialogFormVisible = true;
      this.oldDescription="",
      this.elDate=""
    }
  }
};
</script>